<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>布局练习</title>
		<link rel="stylesheet" href="http://at.alicdn.com/t/font_633731_6xq8du44lwfav2t9.css" />
		<style type="text/css">
			*{
				margin:0;
				padding:0;
			}
			body{
				background:#282828;
			}
			.big_box{
				background: white;
				margin:30px auto;
				width:327px;
				height:375px;
			}
			.big_box .first-movie{
				width:327px;
				height:101px;
				padding-top:33px;
				margin-left:2px;
			}
			.big_box .movie-left{
				width:72px;
				float:left
			}
			.big_box .movie-right{
				width:240px;
				float:right;
				margin-left:14px;
			}
			.big_box h3{
				display:inline-block;
				
			}
			.big_box .movie-commit{
				display:inline-block;
				float:right;
				font-size:12px;
				color:#c90311;
				margin-right:3px;
			}
			.big_box h3{
				font-size: 15px;
				color:#333333;
			}
			.big_box .movie-p{
				font-size:12px;
				margin-top:12px;
				color:#696969;
			}
			.big_box .p-1{
				color:#259c9d;
			}
			.big_box .p-2{
				color:#c90210;
			}
			.big_box .p-3{
				font-size:12px;
				margin-top:12px;
			}
			.icon-ren12{
				color:#c90210;
				vertical-align: -3%;
				
			}
			.second-movie{
				margin-top:15px;
				width:327px;
				height:101px;
				margin-left:2px;
			}
			.third-movie{
				margin-top:15px;
				width:327px;
				height:101px;
				margin-left:2px;
			}
		</style>
	</head>
	<body>
		<!--大盒子-->
		<div class="big_box">
			
			<!--第一部电影-->
			<div class="first-movie">
				<!--左边内容-->
				<div class="movie-left"><img src="img/home_03.jpg" alt="" /></div>
				
				<!--右边内容-->
				<div class="movie-right">
					<h3>环太平洋</h3>
					<p class="movie-commit">468人评论过</p>		
					<p class="movie-p"><span class="p-1">#环太平洋##环太平洋#</span>对建筑物倒塌、核弹攻击城市、外星人入侵...<span class="p-2">[详细]</span></p>
					<p class="p-3"><span class="iconfont icon-ren12"></span> 欧美电影</p>
				</div>
			</div>

			
			<!--第二部电影-->
			<div class="second-movie">
				<!--左边内容-->
				<div class="movie-left"><img src="img/home_06.jpg" alt="" /></div>
				
				<!--右边内容-->
				<div class="movie-right">
					<h3>速度与激情6</h3>
					<p class="movie-commit">783人评论过</p>
				
					<p class="movie-p">【杰森•斯坦森确定加盟<span class="p-1">#速J#</span>】斯坦森饰演第六部大反派欧文•肖...<span class="p-2">[详细]</span></p>
					<p class="p-3"><span class="iconfont icon-ren12"></span> 热映推荐</p>
				</div>
			</div>
			

			<!--第三部电影-->
			<div class="third-movie">
				<!--左边内容-->
				<div class="movie-left"><img src="img/home_08.jpg" alt="" /></div>
				
				<!--右边内容-->
				<div class="movie-right">
					<h3>青春派</h3>
					<p class="movie-commit">97人评论过</p>
				
					<p class="movie-p">《青春派》预告片 "零差评" 持续增长<span class="p-2">[详细]</span></p>
					<p class="p-3"><span class="iconfont icon-ren12"></span> 电影预告</p>
				</div>
			</div>
			
			
			
			
		</div>
	</body>
</html>
